EP 29

2024 iThome 鐵人賽

DAY 29

Software Development

就是要來點 A.I. 的 TopAOAIConnector App系列第 29 篇

16th鐵人賽 a.i. avalonia ui

James Tsai

2024-10-12 23:24:12

63 瀏覽

分享至

Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會展開使用 Avalonia UI 技術所建立的 TopAOAIConnector App 。由於使用 Avalonia UI 可以很快速的進行各平台的桌面應用程式開發，並且透過此 TopAOAIConnector App 來串接 Azure OpenAI Service 時所需的功能研究。

本篇是 就是要來點 A.I. 的 TopAOAIConnector App 系列文的 EP29。

在 EP 28 的調整中，如果只做單一一次的檔案上傳時，沒什麼太大問題，但如果一直換文字檔案上傳處理時，就發生狀況了🫨🫨🫨

而且因為處理上是直接把所有的內容重新顯示到畫面上，感覺顯示新內容時會閃一下畫面。

本回就再來改進處理吧！

P.S. 達到相同目的的做法有很多種，這邊選擇可以改動最少的方式。

首先，找到 ViewModels/ChatPageViewModel.cs 的 ChatPageViewModel 類別，幫其設計增加一個欄位。

private string appandText = string.Empty;

完成如下圖紅框：
01-1

再次找到 ChatPageViewModel 類別當中的 Attach 方法，在前一回撰寫讀取文字檔後設定上述兩欄位的資料的部分與之後的 if 判斷順序與內容稍作改變，原本為：

fileName = resultFiles[0].Name;
fileContent = await reader.ReadToEndAsync();

if (!string.IsNullOrEmpty(fileContent) && messages.Count > 1)
{
    ChatText = $"{Environment.NewLine}{ChatText}{Environment.NewLine}=======Another Attach TextFile======={Environment.NewLine}";
    
    messages.Clear();
    messages.Add(ChatMessage.CreateSystemMessage(SelectedSystemRole!.Prompt));
}

替換為：

fileContent = await reader.ReadToEndAsync();

if (!string.IsNullOrEmpty(fileContent) && messages.Count > 1)
{
    appandText = $"{Environment.NewLine}======= Another Attach TextFile =======";
    
    ChatText = $"{ChatText}{appandText}";

    messages.Clear();
    messages.Add(ChatMessage.CreateSystemMessage(SelectedSystemRole!.Prompt));
}

fileName = resultFiles[0].Name;

完成如下圖紅框：
01-2

繼續找到 ChatPageViewModel 類別當中的 BuildInline 方法，在前一回的 if 判斷內容稍作改變，原本為：

selectableTextBlock.Text = string.Empty;
selectableTextBlock.Inlines?.Clear();

int index = ChatText.IndexOf(fileContent);

selectableTextBlock.Inlines?.Add(new Run(ChatText[..index]));

var fileStackPanel = new StackPanel()
{
    Children =
    {
        new SymbolIcon() { FontSize = 60, Symbol = FluentIcons.Common.Symbol.Document, HorizontalAlignment = Avalonia.Layout.HorizontalAlignment.Left},
        new TextBlock() { FontSize = 20, Text = fileName }
    }
};

selectableTextBlock.Inlines?.Add(fileStackPanel);
selectableTextBlock.Inlines?.Add(new Run(ChatText[(index + fileContent.Length)..]));

替換為：

if (!string.IsNullOrEmpty(fileName))
{
    appandText = appandText.Replace(fileContent, string.Empty);

    selectableTextBlock.Inlines?.Add(new Run(appandText));

    var fileStackPanel = new StackPanel()
    {
        Children =
        {
            new SymbolIcon() { FontSize = 60, Symbol = FluentIcons.Common.Symbol.Document, HorizontalAlignment = Avalonia.Layout.HorizontalAlignment.Left},
            new TextBlock() { FontSize = 20, Text = fileName }
        }
    };

    selectableTextBlock.Inlines?.Add(fileStackPanel);
    fileName = string.Empty;
}
else
{
    selectableTextBlock.Inlines?.Add(new Run(appandText));
}

selectableTextBlock.Inlines?.Add(new LineBreak());
appandText = string.Empty;

完成如下圖紅框：
01-3

繼續找到 ChatPageViewModel 類別當中的 BuildChatText 方法內容稍作改變，原本為：

ChatText = $"{ChatText}{Environment.NewLine}You:{Environment.NewLine}{textContent}{Environment.NewLine}";

替換為：

appandText = $"{Environment.NewLine}You:{Environment.NewLine}{textContent}";
ChatText = $"{ChatText}{appandText}";

而 BuildAoaiResultToChatText 方法內容稍作改變，原本為：

var textResult = $"{chatCompletion.Role}:{Environment.NewLine}{chatCompletion.Content[0].Text}";
ChatText = $"{ChatText}{Environment.NewLine}{textResult}{Environment.NewLine}";

替換為：

appandText = $"{Environment.NewLine}{chatCompletion.Role}:{Environment.NewLine}{chatCompletion.Content[0].Text}";
ChatText = $"{ChatText}{Environment.NewLine}{appandText}{Environment.NewLine}";

完成如下圖紅框：
01-4